<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
            .ljyleft{
            width: 20%;
            height: 100%;
            position: fixed;
        }
            #fixed1{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 90px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed2{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 135px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed3{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 180px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed4{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 800px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed5{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            background-color: red;
            position: fixed; 
            top: 225px; 
            left: 10px;
            outline: none;
            text-align: center;
            transition: background-color 0.3s;
        }
        #fixed1:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed2:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed3:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed4:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed5:hover{
            background-color: rgb(201, 104, 104);
        }
        .icon{
            width: 100px;
            height: 80px;
            overflow: hidden;
            z-index: 1;
            position: relative;
            left: 10px;
        }
        .icon-xiaohongshu {
            width: 100px;
            height: 80px;
            overflow: hidden;
            z-index: 1;
            position: relative;
            left: 10px;
            margin-top: 0px;
        }
        /* 右边 */
        .ljyright{
            width: 80%;
            height: 941.33px;
            position: fixed;
            left: 20%;
        }
/*********** 搜索框 ************/
        .search-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 600px;
            max-width: 600px;
            margin: 10px ;
            margin-left: 100px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 40px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .search-box input[type="text"] {
            flex-grow: 1;
            padding: 10px;
            border: none;
            background-color: transparent;
            outline: none;
        }
        .search-box input[type="submit"] {
            padding: 10px;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .search-btn{
            width: 40px;
            height: 40px;
            border: none;
            background-color: #f5f5f5;
        }
        .icon-sousuo {
            width: 20px;
            height: 20px;
            padding: 0 0;
            color: rgb(255, 255, 255);
            border: none;
            border-radius: 0 4px 4px 0; /* 圆角只在右侧 */
            cursor: pointer;
            position: relative;
        }
        .search-btn span {
            display: none;
        }
        .search-box input[type="submit"]:hover {
            background-color: #e60023; /* 小红书的主题色，深色版本 */
        }
        .search-box:hover{
            border: #e60023 1px solid;
        }
/*  */
        .text{
            width: 100px;
            height: 30px;
            text-align: center;
            margin-left: 90%;
            margin-top: -30px;
        }
        .dropbtn {
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        /* 下拉按钮悬停效果 */
        .dropbtn:hover, .dropbtn:focus {
            background-color: #2980b9;
        }
        /* 下拉内容容器样式 */
        .dropdown {
            position: relative;
            display: inline-block;
        }   
        /* 下拉内容样式 */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            margin-left: -20px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        /* 下拉内容中的链接样式 */
        .dropdown-content a {  
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        /* 下拉内容中的链接悬停效果 */
        .dropdown-content a:hover {background-color: #f1f1f1}
        /* 显示下拉菜单 */
        .show {
            display: block;
        }
        /******* xuanxiangka*********/
        .ljytab{
            width: 1300px;
            margin-top: 20px;
        }
        .t-title{
            width: 1300px;
            height: 35px;
        }
        .t-title span{
            margin-left: 6px;
            display: inline-block;
            width: 75px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        .tc{
            width: 100%;
            height: 1200px;
            line-height: 30px;
            font-size: 18px;
            text-indent: 2em;
            display: none;
        }
        .show{
            display: block;
        }
        .t-title .cur{
            border-bottom: 1px solid pink;
            background-color: #fff;
            color: gray;
            font-weight: bold;
        }
        .show1-box2{
            display: flex; /* 使用Flexbox布局 */
            flex-direction: column; /* 垂直排列子元素 */;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show2-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show3-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show4-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show5-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show6-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show7-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show8-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show9-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show10-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show10-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show11-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show12-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show13-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show14-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show15-box2{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 360px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 20px;/*圆角*/
            position: relative;
            outline: none;
            box-shadow: 0 4px 8px gray(0, 0, 0, 0.2);
        }
        .show1-box2:hover img{
            transform: scale(1.05);
            transition: transform 0.8s ease-in-out;
        }
        .show1-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show2-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show3-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show4-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show5-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show6-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show7-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show8-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }        
        .show9-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show10-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show11-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show12-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show13-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show14-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .show15-box2 img {
            width: 100%;
            height: auto;
            flex-grow: 1;
        }
        .drop-down-bar{
            position: absolute;
            bottom: 0;
            width: 240px;
            height: 140px;
            font-size: 16px;
            color: white;
            border-top: 1px solid rgb(232, 232, 232);
            margin-top: 220px;
            border-radius: 20px;
            z-index: 10;
            transition: transform 1s ease , box-shadow 0.3s ease;
        }
        .drop-down-bar:hover{
            transform: scale(1.1);
            box-shadow: 0 8px 16px gray;
        }
        .ljygridbox{
            width: 100%;
            height: 1200px;
            display: grid;
        /*将文本分成平均的三份   rows是行数，竖着的；colums是列数，横着的*/
            grid-template-columns: repeat(5,1fr);
            grid-template-rows: repeat(3,1fr);
        }       
        .ljygridbox div{
            background-clip: content-box;/* 背景颜色-content */
        }
        .ljygridbox div:first-child{
            grid-column: 1/span 1;
            border: #000 1px solid;
        }
        .ljygridbox div:nth-child(2){
            grid-column: 2/span 1;
        }
        .ljygridbox div:nth-child(3){
            grid-column: 3/span 1;
        }
        .ljygridbox div img{
            width: 100%;
            height: auto; 
            display: block;
        }

        
    </style>
</head>
<body>
    <div class="ljyleft">
        <div class="icon">
            <svg class="icon-xiaohongshu" aria-hidden="true">
                <use xlink:href="#icon-xiaohongshu"></use>
            </svg>
        </div>
        <div id="fixed1"><a href="https://www.baidu.com/">
            <span class="iconfont icon-faxian"> 发现</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed2"><a href="#">
            <span class="iconfont icon-fabu"> 发布</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed3"><a href="#">
            <span class="iconfont icon-tongzhi"> 通知</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed4"><a href="#">
            <span class="iconfont icon-gengduo"> 更多</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed5"><a href="#">
            <span>登录</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
    </div>
    <div class="ljyright">
        <div class="ljyuse">
<!-- form -->
            <form action="/search" method="get" class="search-form">
                <div class="search-box">
                    <input type="text" name="query" placeholder="搜索笔记、商品和用户" required>
                    <button type="submit" class="search-btn">
                        <span>搜索</span>
                        <svg class="icon-sousuo" aria-hidden="true">
                            <use xlink:href="#icon-sousuo"></use>
                        </svg>
                    </button>
                </div>
            </form>
        <div class="text">
            <span onclick="toggleDropdown()">创作中心</span>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#">创作服务</a>
                    <a href="#">电脑直播</a>
                    <a href="#">电脑直播助手</a>
                </div>
        </div>
        </div>
        <div class="ljytab">
            <div class="t-title">
              <span class="cur">推荐</span>
              <span>穿搭</span>
              <span>AI助手</span>
              <span>影视</span>
              <span>感情</span>
              <span>居家</span>
              <span>游戏</span>
              <span>旅行</span>
              <span>健身</span>
            </div>
            <div class="tc show">
                <div class="ljygridbox">
                </div>
            </div>
            <div class="tc">
                <div class="ljygridbox">
                    <div class="show1-box2">
                        <div class="drop-down-bar">
                            <p>#头像</p>
                        </div>
                        <img src=".\奇奇怪怪、可可爱爱、很特别的头像分享_2_畅畅的美图文案馆_来自小红书网页版.jpg" alt="">
                    </div>
                    <div class="show2-box2">
                        <div class="drop-down-bar">
                            <p>#恋爱两百天日记</p>
                        </div>
                        <img src=".\微信图片_20241215135353.jpg" alt="">
                    </div>
                    <div class="show3-box2">
                        <div class="drop-down-bar">
                            <p>#海底捞</p>
                        </div>
                        <img src=".\微信图片_20241215135400.jpg" alt="">
                    </div>
                    <div class="show4-box2">
                        <div class="drop-down-bar">
                            <p>#大连#莲花山观景台</p>
                        </div>
                        <img src=".\微信图片_20241215135345.jpg" alt="">
                    </div>
                    <div class="show5-box2">
                        <div class="drop-down-bar">
                            <p>#日落</p>
                        </div>
                        <img src=".\微信图片_20241215135349.jpg" alt="">
                    </div>
                    <div class="show6-box2">
                        <div class="drop-down-bar">
                            <p>#钟楼</p>
                        </div>
                        <img src=".\微信图片_20241215135342.jpg" alt="">
                    </div>
                    <div class="show7-box2">
                        <div class="drop-down-bar">
                            <p>#夏天#水果</p>
                        </div>
                        <img src=".\微信图片_20241215135338.jpg" alt="">
                    </div>
                    <div class="show8-box2">
                        <div class="drop-down-bar">
                            <p>#长安</p>
                        </div>
                        <img src=".\微信图片_20241215135335.jpg" alt="">
                    </div>
                    <div class="show9-box2">
                        <div class="drop-down-bar">
                            <p>#头像</p>
                        </div>
                        <img src=".\IMG_9656.jpg" alt="">
                    </div>
                    <div class="show10-box2">
                        <div class="drop-down-bar">
                            <p>#羊肉泡馍</p>
                        </div>
                        <img src=".\微信图片_20241215135332.jpg" alt="">
                    </div>
                    <div class="show11-box2">
                        <div class="drop-down-bar">
                            <p>#大唐芙蓉园</p>
                        </div>
                        <img src=".\微信图片_20241215135329.jpg" alt="">
                    </div>
                    <div class="show12-box2">
                        <div class="drop-down-bar">
                            <p>#星海广场</p>
                        </div>
                        <img src=".\微信图片_20241215135322.jpg" alt="">
                    </div>  
                    <div class="show13-box2">
                        <div class="drop-down-bar">
                            <p>#头像</p>
                        </div>
                        <img src=".\奇奇怪怪、可可爱爱、很特别的头像分享_1_畅畅的美图文案馆_来自小红书网页版.jpg" alt="">
                    </div>
                    <div class="show14-box2">
                        <div class="drop-down-bar">
                            <p>#花海</p>
                        </div>
                        <img src=".\微信图片_20241215135318.jpg" alt="">
                    </div>
                    <div class="show15-box2">
                        <div class="drop-down-bar">
                            <p>#现代都市</p>
                        </div>
                        <img src=".\微信图片_20241215135228.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="tc">

            </div>
            <div class="tc">

            </div>
            <div class="tc">

            </div>
            <div class="tc">

            </div>
            <div class="tc">

            </div>
            <div class="tc">

            </div>
            <div class="tc">

            </div>
        </div>                          
    </div>
</div>
<!-- JSON数据 -->
    <script>
        var data =
        {   
          "grid": [
        {
          "class": "show1-box2",
          "title": "#头像",
          "imageSrc": "./奇奇怪怪、可可爱爱、很特别的头像分享_2_畅畅的美图文案馆_来自小红书网页版.jpg"
        },
        {
          "class": "show2-box2",
          "title": "#恋爱两百天日记",
          "imageSrc": "./微信图片_20241215135353.jpg"
        },
        {
          "class": "show3-box2",
          "title": "#海底捞",
          "imageSrc": "./微信图片_20241215135400.jpg"
        },
        {
          "class": "show4-box2",
          "title": "#大连#莲花山观景台",
          "imageSrc": "./微信图片_20241215135345.jpg"
        },
        {
          "class": "show5-box2",
          "title": "#日落",
          "imageSrc": "./微信图片_20241215135349.jpg"
        },
        {
          "class": "show6-box2",
          "title": "#钟楼",
          "imageSrc": "./微信图片_20241215135342.jpg"
        },
        {
          "class": "show7-box2",
          "title": "#夏天#水果",
          "imageSrc": "./微信图片_20241215135338.jpg"
        },
        {
          "class": "show8-box2",
          "title": "#长安",
          "imageSrc": "./微信图片_20241215135335.jpg"
        },
        {
          "class": "show9-box2",
          "title": "#头像",
          "imageSrc": "./IMG_9656.jpg"
        },
        {
          "class": "show10-box2",
          "title": "#羊肉泡馍",
          "imageSrc": "./微信图片_20241215135332.jpg"
        },
        {
          "class": "show11-box2",
          "title": "#大唐芙蓉园",
          "imageSrc": "./微信图片_20241215135329.jpg"
        },
        {
          "class": "show12-box2",
          "title": "#星海广场",
          "imageSrc": "./微信图片_20241215135322.jpg"
        },
        {
          "class": "show13-box2",
          "title": "#头像",
          "imageSrc": "./奇奇怪怪、可可爱爱、很特别的头像分享_1_畅畅的美图文案馆_来自小红书网页版.jpg"
        },
        {
          "class": "show14-box2",
          "title": "#花海",
          "imageSrc": "./微信图片_20241215135318.jpg"
        },
        {
          "class": "show15-box2",
          "title": "#现代都市",
          "imageSrc": "./微信图片_20241215135228.jpg"
        }
      ]
    }
        var ljygridbox = document.querySelector('.ljygridbox');
        var gridItems = data.grid;
        // 动态创建图片框
        gridItems.forEach(function(item) {
          var box = document.createElement('div');
          box.className = item.class;
    
          var dropDownBar = document.createElement('div');
          dropDownBar.className = 'drop-down-bar';
          dropDownBar.innerHTML = '<p>' + item.title + '</p>';
    
          var img = document.createElement('img');
          img.src = item.imageSrc;
          img.alt = '';
    
          box.appendChild(dropDownBar);
          box.appendChild(img);
    
          document.querySelector('.ljygridbox').appendChild(box);
        });
      </script>

    <script>//1.下拉菜单的显示和隐藏
        function toggleDropdown() {
        var dropdown = document.getElementById("myDropdown");
        if (dropdown.style.display === "block") {
             dropdown.style.display = "none";
        } 
        else {
            dropdown.style.display = "block";
        }
    }
        // 关闭菜单
        window.onclick = function(event) {
        if (!event.target.matches('.text span')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.style.display === "block") {
                    openDropdown.style.display = "none";
                }
            }
        }
        }
    </script>
    <script>//2.选项卡切换
            var tab = document.querySelector('.ljytab');
            var tt = tab.querySelector('.t-title');
            var spans = tt.querySelectorAll('span');//5个对象
            var tcs = tab.querySelectorAll('.tc');//5个对象
            for(var i = 0; i < spans.length; i++){
                spans[i].index = i;
                spans[i].onmouseover = function(){
                for(var j = 0; j < tcs.length; j++){
                    tcs[j].style.display = 'none';
                    spans[j].className = '';
                }
                tcs[this.index].style.display = 'block';
                this.className = 'cur';
                }
            }
    </script>
    <script src="./iconfont.js"></script>
</body>
</html>